import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AlignDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('对齐与相对定位'),
          centerTitle: true,
        ),
        // Column纵轴的长度取决于他们最大子元素的长度
        body: Column(
          children: <Widget>[
            Container(
              height: 120,
              width: 120,
              color: Colors.blue[50],
              // alignment : 需要一个AlignmentGeometry类型的值，表示子组件在父组件中的起始位置。
              // AlignmentGeometry 是一个抽象类，它有两个常用的子类：Alignment和 FractionalOffset。
              child: Align(
                alignment: Alignment.topRight,
                child: FlutterLogo(size: 60),
              ),
            ),
            // widthFactor和heightFactor是用于确定Align组件本身宽高的属性；
            // 它们是两个缩放因子，会分别乘以子元素的宽、高，最终的结果就是Align组件的宽高
            // 当widthFactor或heightFactor为null时组件的宽高将会占用尽可能多的空间
            Align(
              widthFactor: 2,
              heightFactor: 2,
              alignment: Alignment.topRight,
              child: FlutterLogo(size: 60),
            ),
            Align(
              widthFactor: 2,
              heightFactor: 2,
              // Alignment会以矩形的中心点作为坐标原点
              alignment: Alignment(-0.5, -0.5),
              child: FlutterLogo(size: 60),
            ),
            Align(
              widthFactor: 2,
              heightFactor: 2,
              // FractionalOffset的坐标原点为矩形的左侧顶点
              alignment: FractionalOffset(0.2, 0.6),
              child: FlutterLogo(size: 60),
            )
          ],
        ),
      );
}
